<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>price</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
        //创建一个数据数组
        let data = [
            {id:1,name:"iphone14",price:5999},
            {id:2,name:"iphone14 Pro",price:7999},
            {id:3,name:"iphone14 pro Max",price:8999}
        ]
        //克隆表身
        let tbody = document.querySelector("tbody");
        for(let i =0;i<data.length;i++){
            //创建新的行
            let  tr = document.createElement("tr"); 
            //将新的tr添加到表身tbody里
            tbody.appendChild(tr);
            //遍历i
            for(let k in data[i]){
                //创建一个列（td)
                let td = document.createElement("td")
                //把值给列td,并且打印到桌面
                td.innerHTML=data[i][k]
                tr.appendChild(td);
            }
        }
    </script>
  </body>
</html>
